<template>
	<view class="hot">
		<view class="item" @click="router('/pages/home/market_list?type=foodstuff')">
			<view class="name">粮食</view>
			<image :src="`${baseImageUrl}/common/hot_cover1.png`" class="cover"></image>
			<view class="price">￥{{foodstuff}}</view>
		</view>
		<view class="item" @click="router('/pages/home/market_list?type=cloth')">
			<view class="name">布匹</view>
			<image :src="`${baseImageUrl}/common/hot_cover2.png`" class="cover"></image>
			<view class="price">￥{{cloth}}</view>
		</view>
		<view class="item" @click="router('/pages/home/market_list?type=titledeed')">
			<view class="name">房契</view>
			<image :src="`${baseImageUrl}/common/hot_cover3.png`" class="cover"></image>
			<view class="price">￥{{titledeed}}</view>
		</view>
		<view class="item" @click="router('/pages/home/market_list?type=music')">
			<view class="name">乐谱</view>
			<image :src="`${baseImageUrl}/common/hot_cover4.png`" class="cover"></image>
			<view class="price">￥{{music}}</view>
		</view>
		<view class="item" @click="router('/pages/home/market_list?type=escort')">
			<view class="name">镖旗</view>
			<image :src="`${baseImageUrl}/common/hot_cover5.png`" class="cover"></image>
			<view class="price">￥{{escort}}</view>
		</view>
		<image :src="`${baseImageUrl}/common/d.png`" class="d_cover"></image>
	</view>
</template>

<script>
	import {
		userSellPrice
	} from '@/request/api.js';
	export default {
		data() {
			return {
				foodstuff: "",
				cloth: "",
				titledeed: "",
				music: "",
				escort: "",
			}
		},
		async created() {
			let {
				sell
			} = await userSellPrice();
			this.foodstuff = sell.foodstuff;
			this.cloth = sell.cloth;
			this.titledeed = sell.titledeed;
			this.music = sell.music;
			this.escort = sell.escort;
		}
	}
</script>

<style scoped lang="scss">
	.hot {
		padding: 0 10rpx 38rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		position: relative;

		.d_cover {
			width: 100%;
			height: 62rpx;
			position: absolute;
			left: 0;
			bottom: 0;
		}

		.item {
			width: 136rpx;
			height: 165rpx;
			padding: 5rpx 0;
			box-sizing: border-box;
			background: url(#{$baseImageUrl}/common/hot_item.png) no-repeat;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			position: relative;
			z-index: 2;

			.name {
				color: #351400;
				font-size: 28rpx;
				font-weight: 400;
				font-family: LiSu;
			}

			.cover {
				width: 100rpx;
				height: 100rpx;
				position: absolute;
				left: 50%;
				top: 20rpx;
				transform: translateX(-50%)
			}

			.price {
				color: #FFFFFF;
				font-size: 20rpx;
				font-weight: 400;
				font-family: SimSun;
			}
		}
	}
</style>